<template>
    <div class="con">
        <div class="header">
            <img src="../../assets/images/hometoutu.png" alt class="toutu" />
            <ul>
                <li @click="ok1()">
                    <img src="../../assets/images/homeicon1.png" alt />
                    <p>信用卡收款</p>
                </li>
                <li @click="ok2()">
                    <img src="../../assets/images/homeicon2.png" alt />
                    <p>智能还卡</p>
                </li>
            </ul>
        </div>
        <div class="adv">
            <ul>
                <li>
                    <img src="../../assets/images/homeicon3.png" alt />
                    <span>3秒极速到账</span>
                </li>
                <li>
                    <img src="../../assets/images/homeicon4.png" alt />
                    <span>费率超低</span>
                </li>
                <li>
                    <img src="../../assets/images/homeicon5.png" alt />
                    <span>一清收单机购安全保障</span>
                </li>
            </ul>
        </div>
        <div class="menu">
            <ul>
                <li v-for="(item,index) in homeActionData" :key="index" @click="go(item.code)">
                    <img :src="item.imgUrl" alt />
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </div>
        <div class="swiper">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item,index) in swiperData" :key="index">
                    <div @click="goUrl(item.code)">
                        <img :src="item.imgUrl" alt class="swiper-img" />
                    </div>
                </swiper-slide>

                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="title" @click="goAwardh5()">
            <p>
                <img src="../../assets/images/home/titleicon.png" alt />
                {{title}}
            </p>
            <img src="../../assets/images/more.png" alt class="more" />
        </div>
        <dl v-for="(item,index) in h5GetRecommendActives" :key="index">
            <dd>
                <img :src="item.icon" alt />
            </dd>
            <dt>
                <p>{{item.taskTitle}}</p>
                <span>{{item.taskViceTitle}}</span>
                <button v-if="item.taskStatus==0" @click="gofinish(item.taskCode)">去完成</button>
                <button
                    v-else-if="item.taskStatus==1"
                    style="background:#21D39A"
                    @click="award(item.id)"
                >领取奖励</button>
                <button v-else style="background:#CDD0DA">已完成</button>
            </dt>
        </dl>
        <div style="height:50px"></div>
        <div class="footer">
            <ul>
                <li>
                    <img src="../../assets/images/homeactive.png" alt />
                    <p>首页</p>
                </li>
                <li @click="my()">
                    <img src="../../assets/images/my.png" alt />
                    <p style="color:#A6A9B5">我的</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "home",
    data() {
        return {
            timestamp: "",
            homeActionData: {},
            swiperOption: {
                pagination: ".swiper-pagination",
                loop: true
            },
            swiperData: {},
            h5GetRecommendActives: {},
            title: ""
        };
    },

    methods: {
        ok1() {
            this.$router.push({ name: "credit" });
        },
        ok2() {
            this.$router.push({ name: "backAdv" });
        },
        my() {
            this.$router.push({ name: "my" });
        },
        go(code) {
            console.log(code);
            switch (code) {
                case "982131":
                    this.$router.push({ name: "qrcode" });
                    break;
                case "463123":
                    this.$router.push({ name: "myalipay" });

                    break;

                case "987123":
                    this.$router.push({ name: "vip" });
                    break;
                case "091345":
                    this.$router.push({ name: "mybackplan" });

                    break;
            }
        },
        goUrl(code) {
            console.log(code);
            switch (code) {
                case "100934":
                    this.$router.push({ name: "awardh5" });
                    break;
            }
        },
        goAwardh5() {
            this.$router.push({ name: "awardh5" });
        },
        // 去完成
        gofinish(code) {
            switch (code) {
                case "654839":
                    this.$router.push({ name: "register" });
                    break;
                case "135678":
                    this.$router.push({ name: "addsavecard" });
                    break;
                case "912382":
                case "126384":
                    this.$router.push({ name: "addcreditcard" });
                    break;
                case "314819":
                case "641394":
                case "093123":
                    this.$router.push({ name: "credit" });
                    break;
                case "000000":
                    this.$router.push({ name: "shareh5" });
                    break;
                default:
                    break;
            }
        },
        // 领取奖励
        award(id) {
            this.axios({
                method: "post",
                headers: { token: localStorage.getItem("token") },
                url: `${this.siteUrl}/app/active/getAwards?appid=web.2019&format=json&timestamp=${this.timestamp}`,
                data: {
                    userId: Number(localStorage.getItem("userId")),
                    taskId: id
                }
            })
                .then(response => {
                    console.log(response);
                    this.$toast(response.data.message);
                    this.select();
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());

        this.axios({
            method: "post",
            url: `${this.siteUrl}/app/h5/getAppImage?appid=web.2019&timestamp=${this.timestamp}`,
            data: {
                userId: localStorage.getItem("userId"),
                imgType: "home_action"
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    this.homeActionData = response.data.data.imgData;
                } else {
                    this.$Message.error(response.data.message);
                }
            })
            .catch(function(error) {
                console.log(error);
            });

        this.axios({
            method: "post",
            url: `${this.siteUrl}/app/h5/getAppImage?appid=web.2019&timestamp=${this.timestamp}`,
            data: {
                userId: localStorage.getItem("userId"),
                imgType: "tb_active"
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    this.swiperData = response.data.data.imgData;
                } else {
                    this.$Message.error(response.data.message);
                }
            })
            .catch(function(error) {
                console.log(error);
            });

        this.axios({
            method: "post",

            url: `${this.siteUrl}/app/h5/h5GetRecommendActives?appid=web.2019&format=json&timestamp=${this.timestamp}`,
            data: {
                userId: Number(localStorage.getItem("userId"))
            }
        })
            .then(response => {
                console.log(response);
                this.h5GetRecommendActives = response.data.data.data;
                this.title = response.data.data.title;
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #fff;
}

.con .header .toutu {
    width: 100%;
    position: relative;
}

.con .header ul {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    text-align: center;
}

.con .header ul li {
    float: left;
    width: 50%;
    margin-top: 48px;
}
.con .header ul li img {
    width: 70px;
}
.con .header ul li p {
    color: #fff;
    margin-top: 15px;
}
.con .adv ul {
    margin-top: -25px;
}

.con .adv ul li {
    float: left;
    font-size: 12px;
    color: #a6a9b5;
    width: 30%;
    text-align: center;
}
.con .adv ul li:nth-child(2) {
    width: 25%;
}
.con .adv ul li:last-child {
    width: 45%;
}
.con .adv ul li img {
    width: 12px;
    vertical-align: -2px;
}
.con .menu ul {
    margin-top: 30px;
    width: 100%;
    overflow: hidden;
}
.con .menu ul li {
    width: 25%;
    text-align: center;
    float: left;
    color: #2d3659;
    margin-top: 5px;
}
.con .menu ul li img {
    width: 32px;
    height: 32px;
}
.con .menu ul li p {
    margin-top: 8px;
}
.con .footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 50px;
    border-top: 1px solid #ddd;
    width: 100%;
    background: #fff;
}
.con .footer ul li {
    width: 50%;
    float: left;
    text-align: center;
}
.con .footer ul li img {
    width: 32px;
}

.swiper {
    margin-top: 24px;
}

.swiper-img {
    width: 100%;
}

.con .title {
    width: 90%;
    margin-left: 5%;
    color: #a6a9b5;
    margin-top: 24px;
    margin-bottom: 12px;
    position: relative;
}
.con .title p img {
    width: 20px;
}
.con .title .more {
    width: 6px;
    position: absolute;
    right: 10px;
    top: 6px;
}

dl {
    width: 90%;
    height: 64px;
    margin-left: 5%;
    border-radius: 4px;
    box-shadow: 0px 2px 4px 0px #f2f2f2;
    margin-top: 15px;
}

dl dd {
    float: left;
    width: 20%;
    height: 36px;
    margin-top: 14px;
}
dl dd img {
    width: 36px;
    height: 36px;
    margin-left: 14px;
}
dl dt {
    float: left;
    width: 80%;
    height: 36px;
    margin-top: 14px;
    position: relative;
}
dl dt span {
    font-size: 12px;
    color: #a6a9b5;
}
dl dt button {
    width: 63px;
    height: 28px;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 3px;
    border-radius: 14px;
    background: #ff724f;
    font-size: 12px;
}
</style>
